<template>
	<view>
		<!-- 搜索无记录 -->
		<zy-empty v-if="this.cardinfo.length==0"></zy-empty>
		<view class="list" v-for="(item,index) in cardinfo" :key="index">
			<!-- 返回顶部 -->
			<u-back-top :scroll-top="scrollTop"></u-back-top>
			<view class="title">
				<u-icon size="20" color="#3982ed" name="info-circle-fill"></u-icon>
				<text style="margin-left: 5px;">{{$t('public.warehousePositionCode')}}{{$t('public.colon')}}{{item.warehousePositionCode}}</text>
			</view>
			<view class="content">
				<view class="text">
					<text class="sub">{{$t('public.partCode')}}</text>
					<view class="subContent">{{item.partCode}}</view>
				</view>
				<view class="text">
					<text class="sub">{{$t('public.partName')}}</text>
					<view class="subContent">{{item.partName}}</view>
				</view>
				<view class="text">
					<text class="sub">{{$t('public.partSpec')}}</text>
					<view class="subContent">{{item.partSpec}}</view>
				</view>
				<view class="text">
					<text class="sub">{{$t('homepage.AccessoryManagement.partNum')}}</text>
					<view class="subContent">{{item.num}}{{$t('public.piece')}}</view>
				</view>
			</view>
			<view class="btn">
				<u-button :text="$t('public.detailInfo')" class="detail"
					color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" @click="goDetail(item)">
				</u-button>
			</view>
		</view>
		<!-- 弹出层 -->
		<u-modal :show="show" :title="$t('homepage.AccessoryManagement.storageDetailInfo')" @confirm="confirm">
			<view>
				<view class="showText">{{$t('public.warehousePositionCode')}}{{$t('public.colon')}}<u--text type="info" :text="warehousePositionCode"></u--text>
				</view>
				<view class="showText">{{$t('public.partCode')}}{{$t('public.colon')}}<u--text type="info" :text="partCode"></u--text>
				</view>
				<view class="showText">{{$t('public.partName')}}{{$t('public.colon')}}<u--text type="info" :text="partName"></u--text>
				</view>
				<view class="showText">{{$t('homepage.AccessoryManagement.partUnit')}}{{$t('public.colon')}}<u--text type="info" :text="partUnit"></u--text>
				</view>
				<view class="showText">{{$t('homepage.AccessoryManagement.partType')}}{{$t('public.colon')}}<u--text type="info" :text="partType"></u--text>
				</view>
				<view class="showText">{{$t('public.partSpec')}}{{$t('public.colon')}}<u--text type="info" :text="partSpec"></u--text>
				</view>
				<view class="showText">{{$t('homepage.AccessoryManagement.partNum')}}{{$t('public.colon')}}<u--text type="info" :text="num"></u--text>
				</view>
				<view class="showText">{{$t('public.callTime')}}{{$t('public.colon')}}<u--text type="info" :text="createTime"></u--text>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				cardinfo: [],
				show: false,
				warehousePositionCode: '',
				partCode: '',
				partName: '',
				partUnit: '',
				partType: '',
				partSpec: '',
				num: '',
				createTime: '',
			}
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.redirectTo({
					url: "/pages/HomePage/StoreManagement/AccessoryManagement/CheckStorage/info"
				})
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			this.cardinfo = this.$store.state.inventoryQueryInfo
		},
		methods: {
			//返回顶部
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			goDetail(item) {
				this.show = true
				this.warehousePositionCode = item.warehousePositionCode
				this.partCode = item.partCode
				this.partName = item.partName
				this.partUnit = item.partUnit
				this.partType = item.partType
				this.partSpec = item.partSpec
				this.num = item.num
				this.createTime = item.createTime
			},
			confirm() {
				this.show = false
			},
		}
	};
</script>

<style lang="scss" scoped>
	.list {
		width: 89vw;
		height: 180px;
		margin: 5px 10px;
		padding: 10px;
		background-color: #Fff;
		border-radius: 8px;
	}

	.title {
		padding-bottom: 5px;
		display: flex;
		font-size: 14px;
		font-weight: 800;
		border-bottom: 1px dashed #eaebee;
	}

	.text {
		color: #ccc;
		padding: 6px 3px;
		font-size: 14px;
		display: flex;
	}

	.sub {
		text-align: left;
	}

	.subContent {
		width: 68vw;
		text-align: right;
	}

	.img {
		width: 13px;
		height: 13px;
	}

	.btn {
		width: 36%;
		margin: 0 auto;
	}

	.detail {
		word-spacing: 2px;
		height: 30px;
		border-radius: 50px;
	}

	.showText {
		display: flex;
	}
</style>
